<template>
	<div>
		<div class="Guanzhu">
			<div class="Guanzhu_top">
				<router-link to="../wode/">
					<img class="Gz_arrow" src="../../assets/images/left.png" alt="" />
				</router-link>
				<img  class="Huang" src="../../assets/images/2-1.png" />
				<p>卑鄙的我</p>
				<h6><a href="#">关注&nbsp;12</a><a href="#">粉丝&nbsp;25</a></h6>
				<img class="Qianbi" src="../../assets/images/2-5.png" />
			</div>
			<div class="Guanzhu_nav">
				<ul>
					<li>
						<router-link :to="{path:'/dongtai'}">动态</router-link>
					</li>
					<li>
						<router-link :to="{path:'/xiangce'}">相册</router-link>
					</li>
					<li class="active">
						<router-link :to="{path:'/guanzhu'}">关注</router-link>
					</li>
					<li>
						<router-link :to="{path:'/fensi'}">粉丝</router-link>
					</li>
				</ul>
			</div>
			<div class="Guanzhu_con">
				<ul v-for="info in infoList">
					<li>
						<img :src="info.Src1" alt="" />
					</li>
					<li>
						<h4>{{info.title}}</h4>
						<p>{{info.con}}</p>
						<p>{{info.name}}</p>
					</li>
					<li>
						<img :src="info.Src2" alt="" />
					</li>
				</ul>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'guanzhu',
		data() {
			return {
			  infoList:[
			    {
			      Src1:require("../../assets/images/5-4.png"),
			      Src2:require("../../assets/images/5-3.png"),
			      title:"水果味的小仙女",
			      con:"春风十里，不如直播一场，我在直播等你",
			      name:"@茄子味的小男神  等27人关注了你"
			    },
			    {
			      Src1:require("../../assets/images/5-5.png"),
			      Src2:require("../../assets/images/5-3.png"),
			      title:"小野妹子",
			      con:"有个不懂得说话的男朋友是什么滋味",
			      name:"@内涵姐神  等78人关注了她"
			    },
			    {
			      Src1:require("../../assets/images/5-6.png"),
			      Src2:require("../../assets/images/5-3.png"),
			      title:"亦绿小清新",
			      con:"在今日勇士队举办的一个活动中，勇。。",
			      name:"@玫瑰花的葬礼  等58人关注了她"
			    },
			    {
			      Src1:require("../../assets/images/3-8.png"),
			      Src2:require("../../assets/images/5-3.png"),
			      title:"黄雅莉",
			      con:"张继科一切顺利  张继科要健康 张。。",
			      name:"@百合花也有春天  等458人关注了她"
			    },
			    {
			      Src1:require("../../assets/images/5-7.png"),
			      Src2:require("../../assets/images/5-3.png"),
			      title:"锅盖头司令",
			      con:"来不及看清你的面容  却模糊了你的容颜",
			      name:"@云淡风轻  等27人关注了她"
			    }
			  
			  ]
			}
		}
	}
</script>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.Guanzhu {
		.Guanzhu_top {
			width: 100%;
			height: 500/75rem;
			background: url('../../assets/images/bghui.jpg');
			position: relative;
			.Gz_arrow{
				position: absolute;
				top: 28/75rem;
				left: 15/75rem;
			}
			.Huang {
				width: 202/75rem;
				height: 202/75rem;
				margin-top: 44/75rem;
				margin-left: 274/75rem;
				margin-bottom: 32/75rem;
			}
			.Qianbi {
				width: 198/75rem;
				height: 45/75rem;
				margin-left: 272/75rem;
				margin-top: 22/75rem;
				border-radius: 30/75rem;
			}
			p {
				text-align: center;
				font-size: 32/75rem;
				color: #000;
				font-weight: 700;
				margin-bottom: 22/75rem;
			}
			h6 {
				font-size: 23/75rem;
				text-align: center;
				a:first-child {
					margin-right: 75/75rem;
				}
			}
		}
		.Guanzhu_nav {
			padding: 20/75rem 0;
			background: #fff;
			ul {
				overflow: hidden;
				li {
					font-size: 35/75rem;
					float: left;
					margin-left: 58/75rem;
					margin-right: 55/75rem;
				}
				.active{
				border-bottom:5/75rem solid #5583c1;
				height:50/75rem;
					a{
						color:#5583c1;
					}
				}
			}
		}
		.Guanzhu_con{
			background: #fff;
			ul{
				overflow:hidden;
				padding:20/75rem 20/75rem;
				li{
					float:left;	
					height:120/75rem;
				}
				li:first-child{
					img{
						width:86/75rem;
						height:86/75rem;
					}
				}
				li:nth-child(2){
					width:420/75rem;
					margin-left: 27/75rem;
					h4{
					  font-size: 25/75rem;
					  padding-bottom: 16/75rem;	
					  color: #101010;
					}
					p{
					  font-size: 23/75rem;
					  padding-bottom: 10/75rem;	
					  color:#aaaaaa;
					  
					}
				}
				li:last-child{
					margin-left: 109/75rem;
					img{
						width:68/75rem;
						height:66/75rem;
						margin-top: 27/75rem;
					}
				}
			}
		}
		
	}
</style>